<template>
	<view class="category-section">
		<scroll-view class="category-nav" scroll-x="true" show-scrollbar="false" @scroll="onCategoryScroll">
			<view class="category-container">
				<view class="category-page" v-for="(page, pageIndex) in categoryPages" :key="pageIndex">
					<view class="category-row">
						<view class="category-item" v-for="(item, index) in page.slice(0, 5)" :key="index" @click="onCategoryClick(item)">
							<view class="category-icon">
								<text>{{ item.icon }}</text>
							</view>
							<text class="category-text">{{ item.name }}</text>
						</view>
					</view>
					<view class="category-row">
						<view class="category-item" v-for="(item, index) in page.slice(5, 10)" :key="index + 5" @click="onCategoryClick(item)">
							<view class="category-icon">
								<text>{{ item.icon }}</text>
							</view>
							<text class="category-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 滚动进度条 -->
		<view class="scroll-progress" v-if="categoryPages.length > 1">
			<view class="progress-track">
				<view class="progress-bar" :style="{ width: progressWidth + '%' }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	// 定义组件的props
	const props = defineProps({
		categories: {
			type: Array,
			default: () => [
				{ name: '外卖', icon: '🍔' },
				{ name: '超市', icon: '🛒' },
				{ name: '跑腿奶茶', icon: '🥤' },
				{ name: '买菜', icon: '🥬' },
				{ name: '生鲜', icon: '🥕' },
				{ name: '甜点', icon: '🍰' },
				{ name: '数码', icon: '📱' },
				{ name: '鲜花', icon: '🌹' },
				{ name: '水果', icon: '🍎' },
				{ name: '家电', icon: '🔌' },
				{ name: '医药健康', icon: '💊' },
				{ name: '美妆洗护', icon: '💄' },
				{ name: '母婴用品', icon: '🍼' },
				{ name: '服装鞋包', icon: '👕' },
				{ name: '运动户外', icon: '⚽' },
				{ name: '图书文具', icon: '📚' },
				{ name: '汽车用品', icon: '🚗' },
				{ name: '宠物用品', icon: '🐕' }
			]
		}
	})
	
	// 定义组件的事件
	const emit = defineEmits(['categoryClick'])
	
	// 滚动相关状态
	const scrollProgress = ref(0)
	const itemsPerPage = 10 // 每页显示的分类数量（2行 x 5列）
	
	// 将分类数据分页，每页10个（2行5列）
	const categoryPages = computed(() => {
		const pages = []
		for (let i = 0; i < props.categories.length; i += itemsPerPage) {
			pages.push(props.categories.slice(i, i + itemsPerPage))
		}
		return pages
	})
	
	// 计算进度条宽度百分比
	const progressWidth = computed(() => {
		if (categoryPages.value.length <= 1) return 100
		return Math.max(10, Math.min(100, scrollProgress.value))
	})
	
	// 滚动事件处理
	const onCategoryScroll = (e) => {
		const scrollLeft = e.detail.scrollLeft
		const scrollWidth = e.detail.scrollWidth
		const containerWidth = uni.getSystemInfoSync().windowWidth // 获取屏幕宽度
		
		// 计算可滚动的最大距离
		const maxScrollLeft = scrollWidth - containerWidth
		
		// 计算滚动进度百分比 (0-100)
		if (maxScrollLeft > 0) {
			const progress = (scrollLeft / maxScrollLeft) * 100
			scrollProgress.value = Math.max(0, Math.min(100, progress))
		} else {
			scrollProgress.value = 0
		}
	}
	
	// 分类点击事件
	const onCategoryClick = (category) => {
		emit('categoryClick', category)
	}
</script>

<style scoped>
/* 分类导航 */
.category-section {
	background-color: #fff;
	padding-bottom: 20rpx;
}

.category-nav {
	width: 100%;
	white-space: nowrap;
}

.category-container {
	display: flex;
	padding: 30rpx 0 10rpx;
}

.category-page {
	width: 100vw;
	flex-shrink: 0;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.category-row {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 30rpx;
	gap: 0;
}

.category-row:last-child {
	margin-bottom: 0;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20%;
	flex-shrink: 0;
	cursor: pointer;
}

.category-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 20rpx;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10rpx;
	font-size: 40rpx;
	transition: background-color 0.2s ease;
}

.category-item:active .category-icon {
	background-color: #e0e0e0;
}

.category-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
	white-space: nowrap;
}

/* 滚动进度条 */
.scroll-progress {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 0 20rpx;
}

.progress-track {
	width: 120rpx;
	height: 6rpx;
	background-color: #e0e0e0;
	border-radius: 3rpx;
	overflow: hidden;
	position: relative;
}

.progress-bar {
	height: 100%;
	background-color: #ff6b35;
	border-radius: 3rpx;
	transition: width 0.2s ease;
	min-width: 12rpx;
}
</style> 